<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-card style="padding-right: 40px; padding-left: 40px; padding-bottom: 50px;">
        <el-row>
            <el-col :xs="24" :md="12">
                <el-input placeholder="请输入商品名称" v-model="keyword" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"  @click="query"></el-button>
                </el-input>
            </el-col>
            <el-col style="left: 0px; padding-left: 20px;" :xs="24" :md="12" v-if="true">
                <el-button @click="showAdd()">添加</el-button>
            </el-col>
        </el-row>

        <el-table style="top: 20px;" :data="products" :fit="true" :show-header="true">
            <el-table-column prop="id" label="Id">
            </el-table-column>
            <el-table-column prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200px">
                <template slot-scope="scope">
                    <el-button mc-type="column-el-button" size="mini" type="primary" @click="showEdit(scope.row)">编辑</el-button>
                    <el-button mc-type="column-el-button" size="mini" type="danger" @click="deleteProduct(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>


    <el-dialog title="修改商品" :visible.async="dialogVisible" width="30%" @close="dialogVisible=false">
        <el-form label-width="50px">
            <el-form-item label="Id">
                <el-input type="number" v-model.number="currentProduct.id" placeholder="请输入内容">
                </el-input>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="currentProduct.name" placeholder="请输入内容">
                </el-input>
            </el-form-item>
            <el-form-item label="价格·">
                <el-input v-model.number="currentProduct.price" placeholder="请输入价格">
                </el-input>
            </el-form-item>
            <el-form-item style="text-align: right;">
                <el-button @click="dialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="saveProduct()">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<script>
    const vm = new Vue({
        el:'#app',
        data: {
            defaultPath: "localhost:8080",
            keyword: '',
            products:[],
            currentProduct:{},
            dialogVisible: false, //对话框是否显示
            editMode:false
        },
        methods:{
            query: function (keyword) {
                var path='/products';
                if(this.keyword!="") path=path+"?name="+this.keyword;
                console.log(path)
                var self = this
                axios.get(path)
                    .then(response=>self.products = response.data)
                    .catch(e =>self.$message.error(e.response.data))
            },
            deleteProduct: function (product) {
                var self = this
                axios.delete(`/products/`+product.id)
                    .then(response=>self.query())
                    .catch(e =>self.$message.error(e.response.data))
            },
            showEdit:function(product){
                this.dialogVisible = true
                this.editMode=true;
                this.currentProduct= Object.assign({},product)
            },
            showAdd:function(product){
                this.dialogVisible = true
                this.editMode=false;
                this.currentProduct = {}
            },
            saveProduct:function(){

                var self = this
                if(self.editMode){
                    console.log("11111")
                    axios.put(`/products/`+self.currentProduct.id,self.currentProduct)
                        .then(response=> self.query())
                        .catch(e =>self.$message.error(e.response.data))
                }else{
                    console.log("22222")
                    console.log(self.currentProduct)
                    axios.post(`/products/`,self.currentProduct)
                        .then(response=> self.query())
                        .catch(e => console.log(e))
                }
                this.dialogVisible = false
            }
        }
    })
    vm.query()
    console.log(vm)
</script>
</html>